<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wjn
 * @LastEditTime: 2022-01-10 18:34:40
-->
<template>
  <div ref="bottom3_container" style="height:95%"></div>
</template>

<script>
import {Rose} from '@antv/g2plot'

export default {
    data() {
      return {
        dataArr:[
          { type: '分类一', value: 27 },
          { type: '分类二', value: 25 },
          { type: '分类三', value: 18 },
          { type: '分类四', value: 15 },
          { type: '分类五', value: 10 },
          { type: '其他', value: 5 },
        ]
      }
    },
    created() { //钩子函数

    },
    mounted() {
      this.initChart()
    },
    methods:{
      initChart() {
        const rose = new Rose(this.$refs.bottom3_container, {
          data: this.dataArr,
          xField: 'type',
          yField: 'value',
          seriesField: 'type',
          radius: 1,
          legend: {
            position: 'bottom',
          },
        })
        rose.render();
      }
    }
}
</script>

<style scoped>

</style>